{% extends "layout.html" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow-lg border-0 rounded-lg mt-3">
            <div class="card-header bg-primary text-white">
                <h3 class="text-center font-weight-light my-2">
                    <i class="fas fa-shield-virus me-2"></i>AI Malware Detection
                </h3>
            </div>
            <div class="card-body">
                {% if error %}
                <div class="alert alert-danger">
                    {{ error }}
                </div>
                {% endif %}

                {% if show_about %}
                <!-- About section -->
                <div class="about-section">
                    <h4>About MalwareDetect</h4>
                    <p>MalwareDetect is an AI-powered tool that uses machine learning to identify potential malware in files. Our system analyzes file characteristics to determine if they contain malicious code.</p>
                    
                    <h5 class="mt-4">How It Works</h5>
                    <div class="row">
                        <div class="col-md-4 text-center mb-3">
                            <div class="feature-icon bg-dark rounded-circle p-3 d-inline-block mb-2">
                                <i class="fas fa-upload text-primary fa-2x"></i>
                            </div>
                            <h6>Upload</h6>
                            <p class="small">Upload your file securely</p>
                        </div>
                        <div class="col-md-4 text-center mb-3">
                            <div class="feature-icon bg-dark rounded-circle p-3 d-inline-block mb-2">
                                <i class="fas fa-brain text-primary fa-2x"></i>
                            </div>
                            <h6>Analyze</h6>
                            <p class="small">AI analyzes file structure and behavior</p>
                        </div>
                        <div class="col-md-4 text-center mb-3">
                            <div class="feature-icon bg-dark rounded-circle p-3 d-inline-block mb-2">
                                <i class="fas fa-check-circle text-primary fa-2x"></i>
                            </div>
                            <h6>Results</h6>
                            <p class="small">Get instant security assessment</p>
                        </div>
                    </div>
                    
                    <h5 class="mt-4">Supported File Types</h5>
                    <p>We support scanning these file types: .exe, .dll, .pdf, .doc, .docx, .xls, .xlsx, .zip, .rar, .js, .apk</p>
                    
                    <div class="text-center mt-4">
                        <a href="{{ url_for('index') }}" class="btn btn-primary">
                            <i class="fas fa-shield-virus me-2"></i>Start Scanning
                        </a>
                    </div>
                </div>
                {% else %}
                <!-- Upload form -->
                <form action="/scan" method="post" enctype="multipart/form-data" id="upload-form">
                    <div class="text-center mb-4">
                        <p>Upload a file to scan it for potential malware using AI/ML detection</p>
                    </div>
                    
                    <div class="upload-area p-5 mb-3 bg-dark rounded text-center" id="drop-area">
                        <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
                        <h5>Drag & Drop Files Here</h5>
                        <p>or</p>
                        <label for="file-input" class="btn btn-primary">
                            <i class="fas fa-folder-open me-2"></i>Browse Files
                        </label>
                        <input type="file" name="file" id="file-input" class="d-none" required>
                        <p class="mt-2 selected-file-name" id="file-name">No file selected</p>
                        <div class="small text-muted mt-2">
                            No file size limit - Large files may take longer to scan
                        </div>
                    </div>
                    
                    <!-- Scan options -->
                    <div class="card mb-3 border-light">
                        <div class="card-header bg-light d-flex justify-content-between align-items-center">
                            <h6 class="mb-0"><i class="fas fa-cog me-2"></i>Scan Options</h6>
                            <button type="button" class="btn btn-sm btn-link" data-bs-toggle="collapse" data-bs-target="#scanOptionsCollapse" aria-expanded="false">
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                        <div class="collapse" id="scanOptionsCollapse">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="deepScan" name="deep_scan" value="1">
                                            <label class="form-check-label" for="deepScan">
                                                <i class="fas fa-search-plus me-1 text-primary"></i> Deep Scan
                                                <div class="small text-muted">More thorough but slower analysis</div>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="extractArchives" name="extract_archives" value="1" checked>
                                            <label class="form-check-label" for="extractArchives">
                                                <i class="fas fa-archive me-1 text-primary"></i> Scan Inside Archives
                                                <div class="small text-muted">Check contents of ZIP, RAR files</div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-md-6">
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="heuristicScan" name="heuristic_scan" value="1" checked>
                                            <label class="form-check-label" for="heuristicScan">
                                                <i class="fas fa-brain me-1 text-primary"></i> Heuristic Analysis
                                                <div class="small text-muted">Detect unknown malware variants</div>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="saveReport" name="save_report" value="1">
                                            <label class="form-check-label" for="saveReport">
                                                <i class="fas fa-file-pdf me-1 text-primary"></i> Generate Report
                                                <div class="small text-muted">Create detailed PDF report</div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center">
                        <button type="submit" class="btn btn-lg btn-success" id="scan-button">
                            <i class="fas fa-shield-virus me-2"></i>Scan for Malware
                        </button>
                    </div>
                </form>
                
                <!-- Enhanced scanning progress (initially hidden) -->
                <div id="scanning-progress" class="mt-4 d-none">
                    <div class="card border-primary">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0"><i class="fas fa-spinner fa-spin me-2"></i>Scan in Progress</h5>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-center mb-3">
                                <div class="text-center">
                                    <div class="spinner-border text-primary mb-2" role="status">
                                        <span class="visually-hidden">Scanning...</span>
                                    </div>
                                    <h6 id="scan-file-name">Analyzing file...</h6>
                                </div>
                            </div>
                            
                            <div class="scan-stages mb-3">
                                <div class="d-flex justify-content-between mb-1">
                                    <span id="scan-stage-label">Current stage:</span>
                                    <span id="scan-timer">0s</span>
                                </div>
                                <div class="progress mb-2">
                                    <div id="scan-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" 
                                         role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <div class="scan-status small text-muted" id="scan-status-message">
                                    Initializing scan...
                                </div>
                            </div>
                            
                            <div class="scan-stages">
                                <div class="d-flex align-items-center mb-1">
                                    <div class="scan-stage-indicator me-2" id="stage-init">
                                        <i class="fas fa-circle text-success"></i>
                                    </div>
                                    <div class="scan-stage-label">Initialization</div>
                                </div>
                                <div class="d-flex align-items-center mb-1">
                                    <div class="scan-stage-indicator me-2" id="stage-feature">
                                        <i class="fas fa-circle text-secondary"></i>
                                    </div>
                                    <div class="scan-stage-label">Feature Extraction</div>
                                </div>
                                <div class="d-flex align-items-center mb-1">
                                    <div class="scan-stage-indicator me-2" id="stage-analysis">
                                        <i class="fas fa-circle text-secondary"></i>
                                    </div>
                                    <div class="scan-stage-label">Deep Analysis</div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="scan-stage-indicator me-2" id="stage-report">
                                        <i class="fas fa-circle text-secondary"></i>
                                    </div>
                                    <div class="scan-stage-label">Report Generation</div>
                                </div>
                            </div>
                            
                            <div class="text-center mt-3">
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="cancel-scan">
                                    <i class="fas fa-times me-2"></i>Cancel Scan
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Supported file types info card -->
        <div class="card shadow-sm mt-4">
            <div class="card-body">
                <h5 class="card-title"><i class="fas fa-info-circle me-2"></i>Supported File Types</h5>
                <div class="d-flex flex-wrap">
                    <span class="badge bg-secondary m-1">EXE</span>
                    <span class="badge bg-secondary m-1">DLL</span>
                    <span class="badge bg-secondary m-1">PDF</span>
                    <span class="badge bg-secondary m-1">DOC/DOCX</span>
                    <span class="badge bg-secondary m-1">XLS/XLSX</span>
                    <span class="badge bg-secondary m-1">ZIP</span>
                    <span class="badge bg-secondary m-1">RAR</span>
                    <span class="badge bg-secondary m-1">JS</span>
                    <span class="badge bg-secondary m-1">APK</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}